<script lang="tsx">
import { defineComponent, reactive, toRefs } from 'vue'
import AModal from 'ant-design-vue/es/modal/Modal'
import commonForm from '@/components/commonForm/FormComponent.vue'

export default defineComponent({
  components: {
    AModal,
    CommonForm: commonForm
  },
  props: {
    formConfig: {
      type: Array,
      default: () => []
    },
    labelCol: {
      type: Object,
      default: () => ({ style: { width: '100px' } })
    }
  },
  setup(props, context) {
    const state = reactive({
      visible: false,
      title: 'xixi'
    })
    const methods = {
      openDig() {
        state.visible = true
      }
    }
    return {
      ...toRefs(state),
      ...methods
    }
  },
  render() {
    return (
      <>
        <a-modal
          v-model:visible={this.visible} // 注意：这里在 JSX 中应该直接使用 state.visible，但 Vue 3 不支持 v-model 在 JSX 中直接这样用
          visible={this.visible} // 改为直接使用属性
          title={this.title}
        >
          <CommonForm
            ref="commonFormRef"
            formConfig={this.$props.formConfig}
            {...this.$slots}
          />
        </a-modal>
      </>
    )
  }
})
</script>
